<template>
	<view class="model-detail">
		<view class="status" :style="{ opacity: afterHeaderOpacity }"></view>
		<view class="header">
			<!-- 头部-默认显示 -->
			<view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }">
				<view class="back" @click="backFn"><uni-icons type="arrowleft" color="#fff" size="20"></uni-icons></view>
				<view class="middle"></view>
				<view class="icon-btn"></view>
			</view>
			<!-- 头部-滚动渐变显示 -->
			<view class="after" :style="{ opacity: afterHeaderOpacity, zIndex: afterHeaderzIndex }">
				<view class="back" @click="backFn"><uni-icons type="arrowleft" color="#666" size="20"></uni-icons></view>
				<view class="middle">
					<com-tabs ref="refTabs" :data="anchorlist" @item-click="toAnchorFn"></com-tabs>
				</view>
				<view class="icon-btn">
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="detail-top">
			<swiper class="images-swiper" :indicator-dots="false" @change="swiperChangeHandle" :style="{ height: swiperHeight + 'px' }">
				<swiper-item v-for="(item, index) in modelData.top_pic" :key="index" @click="prviewImage(item, index,'toppic')">
					
						<image :src="item" :id="'content-wrap' + index"/>
					
				</swiper-item>
			</swiper>
			<view v-if="imgList.length > 0" class="indicator">{{activeImgIndex}}/{{imgList.length}}</view>
		</view>
		<view class="detail-bottom">
			<!-- 基本信息 -->
			<view class="tab-item-con base-info flex justify_between flex_end">
				<view>
					<view class="name">{{modelData.name}}<iconfont class="sex" :icon="modelData.sex==0?'men':'women'" color="#999" :size="15"></iconfont></view>
					<uni-rate size="18" active-color="#cfb787" :value="modelData.score" :readonly="true" />
				</view>
				<view class="money">￥{{modelData.price|money}}<text class="unit">/{{modelData.unit}}</text></view>
			</view>
			<!-- 模特详情 -->
			<view class="tab-item-con">
				<view class="item-title">{{tabs[0].title}}</view>
				<view class="flex flex-row">
					<detail-item class="flex1" label="年龄"  :val="modelData.age" unit="岁"></detail-item>
					<detail-item class="flex1" label="地区" :val="modelData.area"></detail-item>
				</view>	
				<view class="flex flex-row">
					<detail-item class="flex1" label="国籍" :val="modelData.nationality"></detail-item>
					<detail-item class="flex1" label="身高" :val="modelData.height"></detail-item>
				</view>	
				<view class="flex flex-row">
					<detail-item class="flex1" label="体重" :val="modelData.weight" unit="kg"></detail-item>
					<detail-item class="flex1" label="三围" :val="modelData.bwh"></detail-item>
				</view>
				<view class="flex flex-row">
					<detail-item class="flex1" label="鞋码" :val="modelData.ssize"></detail-item>
					<detail-item class="flex1" label="服装尺码" :val="modelData.csize"></detail-item>
				</view>	
				<view class="flex flex-row">
					<detail-item class="flex1" label="标签" :val="modelData.tag | joinSplicing('、')"></detail-item>
				</view>	
				<view class="flex flex-row">
					<detail-item class="flex1" label="合作品牌" :val="modelData.brand | joinSplicing('、')"></detail-item>
				</view>	
				<view class="flex flex-row">
					<detail-item label="喜好" :val="modelData.like"></detail-item>
				</view>
				<view class="flex flex-row">
					<detail-item label="技能" :val="modelData.skill"></detail-item>
				</view>
				<view class="flex flex-row flexHc">
					<detail-item label="联系电话" :val="modelData.mobile"></detail-item>
				    <view class="callPhone" @click="callPhone">
				     	拨打号码
				     </view>
				</view>
				<view class="flex flex-row">
					<detail-item label="录入人" :val="modelData.entered"></detail-item>
				</view>
				<view class="flex flex-row">
					<detail-item label="录入人电话" :val="modelData.enteredmobile"></detail-item>
				</view>
				<view class="flex flex-row">
					<detail-item label="备注" :val="modelData.remark"></detail-item>
				</view>
				<view class="mt10">
					<detail-item label="模特作品展示" style="font-size: 40rpx;margin-bottom: 8rpx;"></detail-item>
					<view v-for="(item, index) in imgList" :key="index" @click="prviewImage(item, index,'pic')">
						<image class="model-card" :src="item.url" mode="widthFix" />
						<view class="checkBtn"  @click.stop><u-checkbox
									shape="circle" v-model="item.checked" active-color="#cfb787"></u-checkbox>
							</view>
					</view>
				</view>
			</view>
			<!-- 模特视频展示 -->
			<view class="tab-item-con" id="videoShow"  v-if="videoList.length > 0">
				<view class="item-title">{{tabs[1].title}}</view>
				<view v-for="(item, index) in videoList" :key="index">
					<video class="model-card" :src="item.url" :direction="0" :show-play-btn="true" mode="widthFix"></video>
				    <view class="checkBtn"  @click.stop><u-checkbox
				    			shape="circle" v-model="item.checked" active-color="#cfb787"></u-checkbox>
				    	</view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="tab-item-con">
				<view class="item-title">{{tabs[2].title}}（{{commentList.length}}）</view>
				<view class="more" @click="showAllComment" v-if="commentList.length">查看全部<uni-icons type="arrowright" size="14" color="#999999"></uni-icons></view>
				<view>
					<comment-item v-for="(row, index) in commentList" :key="index" :data="row"></comment-item>
					<com-nodata v-if="commentList.length==0" noImg notice="暂无评论,快去评论吧..."></com-nodata>
				</view>
			</view>
			
		</view>
		<!-- 底部按钮 -->
		<model-bottom :data="modelData.id"  :modeltype="modelData.tag_list" :imgList="imgList" :videoList="videoList"></model-bottom>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import comTabs from '@/components/com-tabs/com-tabs.vue'
	import detailItem from '@/components/detail-item/detail-item.vue'
	import commentItem from '@/components/comment-item/comment-item.vue'
	import modelBottom from '../modelBottom/modelBottom.vue'
	import comNodata from '@/components/com-nodata/com-nodata.vue'
	export default {
		components: {
			comTabs,
			detailItem,
			commentItem,
			modelBottom,
			comNodata
		},
		computed: {
		  ...mapState(['uid'])
		},
		data() {
			return {
				//控制渐变标题栏的参数
				beforeHeaderzIndex: 11,//层级
				afterHeaderzIndex: 10,//层级
				beforeHeaderOpacity: 1,//不透明度
				afterHeaderOpacity: 0,//不透明度
				anchorlist:[
					{title: '模特简介', key: '1', top: 0},
					{title: '视频展示', key: '2', top: 0},
					{title: '评价', key: '3', top: 0}
				],//导航条锚点
				selectAnchor: 0,//选中锚点
				activeImgIndex: 1, // 当前图片索引，从1开始
				base64Pre: 'data:image/png;base64,', // base64图片前缀
				imgList: [],
				topimgList: [],
				videoList: [],
				modelData: {
					tag: [],
					brand: []
				},
				swiperHeight: 240,
				tabs: [ // tabs数据
				    {title: '模特详情', key: '1'},
				    {title: '视频展示', key: '2'},
				    {title: '评价', key: '3'}
				],
				isCollected: false,//收藏
				commentList: [], // 评价列表
				id: ''
			}
		},
		onPageScroll(e) {
			//锚点切换
			this.selectAnchor = e.scrollTop>=this.anchorlist[2].top?2:e.scrollTop>=this.anchorlist[1].top?1:0;
			// 切换选中的tab
			this.$refs.refTabs.changeTab(this.selectAnchor);
			//导航栏渐变
			let tmpY = 375;
			e.scrollTop = e.scrollTop > tmpY ? 375 : e.scrollTop;
			this.afterHeaderOpacity = e.scrollTop * (1 / tmpY);
			this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity;
			//切换层级
			this.beforeHeaderzIndex = e.scrollTop > 0 ? 10 : 11;
			this.afterHeaderzIndex = e.scrollTop > 0 ? 11 : 10;
		},
		onLoad(data) {
		  this.id = data.item
		  
		  this.$nextTick(() => {
			this.setSwiperHeight();
		  });
		  this.getDetails()
		},
		mounted() {
			this.init();
			
		},
		methods: {
			// 获取数据
			async getDetails () {
				let that = this,uid = that.uid;
				let arr = []
				let arr2 = []
				let pic
				let video
				const res = await that.http.httpRequest('/models/getModelDetail','post',{
					id:this.id,
					uid:uid
				})
				console.log(res);
					that.modelData = res.data.data,
					pic = res.data.data.pic || []
					pic.forEach((item) => {
						arr.push({ url: item, checked: false})
					})
					video = res.data.data.video || []
					video.forEach((item) => {
						arr2.push({ url: item, checked: false})
					})
					this.imgList = arr
					that.videoList = arr2,
					that.topimgList = res.data.data.top_pic,
					that.commentList = res.data.data.comment	 		
			},
			init() {
				let _this = this;
				_this.$nextTick(()=>{
					_this.calcAnchor();//计算锚点高度，页面数据是ajax加载时，请把此行放在数据渲染完成事件中执行以保证高度计算正确
				})
			},
			setSwiperHeight() {
			      let element = "#content-wrap" + this.currentIndex;
			      let query = uni.createSelectorQuery().in(this);
			      query.select(element).boundingClientRect();
			      query.exec((res) => {
			        if (res && res[0]) {
						console.log(res);
			          this.swiperHeight = res[0].height;
			        }
			      });
			},
		
			// swiper改变
			swiperChangeHandle(e) {
			    this.currentIndex = e.detail.current;
			   //动态设置swiper的高度，使用nextTick延时设置
			    this.$nextTick(() => {
					this.setSwiperHeight();
			    });
				this.activeImgIndex = e.detail.current + 1;
			},
			// 预览
			prviewImage(img, index,type) {
				let urls = [];
				if(type=="pic"){
					this.imgList.forEach(i => {
						urls.push(i.url)
					})
				}else if(type=="video"){
					this.videoList.forEach(i => {
						urls.push(i.url)
					})
				}else{
					this.topimgList.forEach(i => {
						urls.push(i)
					})
				}
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
			//跳转锚点
			toAnchorFn(index){
				this.selectAnchor = index;
				uni.pageScrollTo({scrollTop: this.anchorlist[index].top,duration: 200});
			},
			//计算锚点高度
			calcAnchor(){
				let commentsView = uni.createSelectorQuery().select("#videoShow");
				commentsView.boundingClientRect((data) => {
					if (data) {
					let statusbarHeight = 0;
					//APP内还要计算状态栏高度
					// #ifdef APP-PLUS
					statusbarHeight = plus.navigator.getStatusbarHeight()
					// #endif
					let headerHeight = uni.upx2px(100);
					let swiperAndBootomHeight = uni.upx2px(580);
					this.anchorlist[1].top = data.top - headerHeight - statusbarHeight + swiperAndBootomHeight;
					this.anchorlist[2].top = data.bottom - headerHeight - statusbarHeight + swiperAndBootomHeight;
				}
				}).exec();
				
			},
			// 返回
			backFn() {
				uni.navigateBack(2);
			},
			// 联系模特
			callPhone (phone) {
			  uni.makePhoneCall({
			  	phoneNumber: this.modelData.mobile
			  })
			},
			// 查看更多评论
			showAllComment() {
				uni.navigateTo({
					url: '../commentList/commentList'
				})
			},
		}
	}
</script>

<style lang="scss">
	.checkBtn {
		text-align: center;
		margin-bottom: 10upx;
	}
page {
	background-color: #f8f8f8;
}
.icon {
	font-size: 26upx;
}
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
	background-color: #f1f1f1;
	transition: opacity 0.05s linear;
}
.header {
	width: 100%;
	height: 100upx;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */
	.before,
	.after {
		width: 100%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
		/*  #endif  */
		transition: opacity 0.05s linear;
		.middle {
			width: 100%;
		}
		.icon-btn {
			width: 125upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
		}
	}
	.after {
		background-color: #FFFFFF;
		.middle {
			width: 92%;
		}
	}
}
.model-detail {
	position: relative;
	.callPhone {
		margin-left: 24rpx;
		background-color: #cfb787;
		border-radius: 18rpx;
		padding: 6rpx 10rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		height: 42rpx;
	}
	.detail-top {
		position: relative;
		height: 480upx;
	}

	.images-swiper,
	image {
		width: 750upx;
		height: 480upx;
	}

	.detail-top .indicator {
		position: absolute;
		right: 20upx;
		bottom: 20upx;
		height: 40upx;
		line-height: 40upx;
		padding: 0 24upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 22upx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 40px;
		box-sizing: border-box;
	}
	.detail-bottom {
		padding-bottom: 100upx;
		.tab-item-con {
			position: relative;
			margin-bottom: 16upx;
			padding: 20upx;
			background-color: #fff;
			box-sizing: border-box;
			&.base-info {
				.name {
					margin-bottom: 16upx;
					color: $uni-text-color;
					font-size: 36upx;
					font-weight: 700;
				}
				.sex {
					margin-left: 10upx;
					font-weight: 500;
				}
				.money {
					color: $deep-color;
					font-size: 44upx;
					font-weight: 700;
					.unit {
						font-size: 30upx;
						font-weight: 500;
					}
				}
			}
			.item-title {
				margin-bottom: 30upx;
				font-size: 32upx;
				font-weight: 700;
			}
			.more {
				position: absolute;
				top: 24upx;
				right: 20upx;
				color: #999;
				font-size: 26upx;
			}
		}
	}
	.model-card {
		width: 100%;
		height: 500upx;
		// margin-bottom: 20upx;
	}
	.line {
		padding: 0 20upx;
	}
}
</style>
